<template>
	<view class="content">
		<view class="content-top">
			
			<view class="content-topimg">
				<image :src="httpUrlFn(shopobj.bannerImage)" mode="widthFix"></image>
			</view>
		</view>
		<view class="info">
			<view class="titleorlove">
				<view class="titleorlove-title">
					{{shopobj.name}}
				</view>
				<view class="titleorlove-img" @click="operateShopCollectfun">
					<image src="/static/images/store2.png" v-if="collectFlag==0"></image>
					<image src="/static/images/store6.png" v-if="collectFlag==1"></image>
				</view>
				</view>
				<view class="list-cw-item-listimg">
					<image :src="item1<shopobj.grade?'/static/images/store4.png':'/static/images/store5.png'" v-for="(item1,index1) in 5" :key="index1"></image>
					<!-- <image src="/static/images/store4.png" ></image>
					<image src="/static/images/store4.png" ></image>
					<image src="/static/images/store4.png" ></image>
					<image src="/static/images/store4.png" ></image>
					<image src="/static/images/store5.png" ></image> -->
					<text>{{shopobj.grade}}分</text>
				</view>
				<view class="info-fw">
					服务宠主：{{shopobj.serviceNum}}位
				</view>
				<view class="info-new">
					<view class="info-left">
						<view class="info-left-yy">
							<text class="info-left-yy-state">{{shopobj.tradeStatus==1?"营业中":"休息中"}}</text>
							<text >周一到周日{{shopobj.openBeginTime}} — {{shopobj.openEndTime}}</text>
						</view>
						<view class="info-left-dz" @click="getArrde">
							<image src="/static/images/store1.png" ></image>
							<view class="info-left-dz-info" >
								{{shopobj.address}}
							</view>
						</view>
						<!-- <view class="info-left-jl">
							距您2.8km，骑行需18分钟
						</view> -->
					</view>
					<view class="info-right" @click="getArrde">
						<image src="/static/images/store3.png" ></image>
					</view>
					
					
					
				</view>
				
				<view class="store-fw">
					
					<view class="store-title">
						店内服务
					</view>
					<view class="store-fw-list">
						<view class="store-fw-list-item" v-for="(item,index) in serviceProject" :key="index" >
							<image src="/static/store/fw1.png" v-if="item=='洗澡'"></image>
							<image src="/static/store/fw2.png" v-if="item=='美容'"></image>
							<image src="/static/store/fw3.png" v-if="item=='寄养'"></image>
							<image src="/static/store/fw4.png" v-if="item=='疫苗'"></image>
						</view>
						<!-- <view class="store-fw-list-item">
							<image src="/static/store/fw2.png" ></image>
						</view>
						<view class="store-fw-list-item">
							<image src="/static/store/fw3.png" ></image>
						</view>
						<view class="store-fw-list-item">
							<image src="/static/store/fw4.png" ></image>
						</view> -->
					</view>
				</view>
				<view class="store-yh">
					
					<view class="store-title">
						优惠活动
					</view>
					<view class="store-yh-list">
						<view class="store-yh-list-item"  v-for="(item,index) in packageList" :key="index" :class="selectindex==index?'selectstore-yh-list-item':''" @click="packagefun(item.id,shopobj.id,index)">
							
							<image :src="httpUrlFn(item.image)" ></image>
							<view class="store-yh-title">
								<view class="store-yh-name">
									{{item.name}}
								</view>
								<view class="store-yh-js">
									{{item.summarize}}
								</view>
								<view class="store-yh-jg">
									<view class="store-yh-num">
										<view class="store-yh-num-fh">
											￥
										</view>
										<view >
											{{item.preferentialPrice}}
										</view>
									</view>
									<view class="store-yye" @click.stop="gopackagefun()">
										预约
									</view>
								</view>
								
							</view>
						</view>
						
						
						
						
					</view>
				</view>
				<view class="store-tame">
					
					<view class="store-title">
						服务团队
					</view>
					<view class="store-tame-list">
						<view class="store-tame-list-item" v-for="(item,index) in teamList" :key="index">
							<image :src="httpUrlFn(item.head)" ></image>
							<view class="store-info">
								<view class="store-info-mameormax">
									<text>{{item.name}}</text>
									<image src="/static/store/max.png" v-if="item.sex==2"></image>
									<image src="/static/store/store7.png" v-if="item.sex==1"></image>
								</view>
								<view class="store-info-xx">
									{{item.age}}岁 | 从业{{item.workYear}}年 | {{item.positionTitle}}
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				<view class="store-al">
					
					<view class="store-title">
						服务案例
					</view>
					<view class="store-al-list">
						<view class="store-al-list-k">
							<view class="store-al-list-item" v-for="(item,index) in serviceCaseList" :key="index">
								<view class="store-al-list-item-left" @click="showimgonefun(item)">
									服务前
								</view>
								<view class="store-al-list-item-right" @click="showimgtwofun(item)">
									服务后
								</view>
								<image class="image-left" :src="httpUrlFn(item.afterSlImg)" mode="aspectFill" @click="showimgonefun(item)"></image>
								<image class="image-right" :src="httpUrlFn(item.beforeSlImg)" mode="aspectFill" @click="showimgtwofun(item)"></image>
								
							</view>
							
						</view>
						
						
					</view>
				</view>
				
				
				
			
			
			
			
			
			
			
		</view>
		<view class="bt-list">
			<view class="bt-phoneorzx">
				<view class="bt-phoneorzx-item">
					<image src="/static/store/phone.png" ></image>
					<view class="bt-phoneorzx-title">
						电话
					</view>
				</view>
				<view class="bt-phoneorzx-item">
					<image src="/static/store/xx.png" ></image>
					<view class="bt-phoneorzx-title">
						咨询
					</view>
				</view>
			</view>
			<view class="bt-yye" @click="reservationfun">
				预约服务
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getPetShopDetails,operateShopCollect} from "@/api/store";
	import {BASE_URL_IMAHE} from "../../../../utils/https";
	const app =getApp()
	export default {
		
		name: "storeindex",
	  // watch: {
	  //   swiperCurrent(newValue, oldValue) {
	  //     this.order.size = 10;
	  //     this.order.current = 1;
	  //     this.orderFilter = [];
	  //     this.myOrder();
	  //     console.log(newValue, "新的");
	  //     console.log(oldValue, "旧的");
	  //   },
	  // },
	  data() {
	    return {
			detailsdata:{},
			shopobj:{},
			collectFlag:0,
			packageList:[],
			teamList:[],
			serviceProject:[],
			serviceCaseList:[],
			selectshopId:"",
			selectpackageId:"",
			selectindex:0,
	    };
	  },
	  onLoad(options) {
	   this.detailsdata.shopId=options.shopId
	   this.detailsdata.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):""
	   this.detailsdata.serviceObj=app.globalData.data.serviceObj
	   this.getPetShopDetailsfun()
	  },
	  onShow() {
	  },
	  //上拉
	  onReachBottom() {
	  },
	  methods: {
		  getArrde(){
			  var that=this
			  console.log(this.shopobj.latitude,this.shopobj.longitude)
			  uni.openLocation({
				       name: that.shopobj.name,
				  		address: that.shopobj.address,
			  			latitude: that.shopobj.latitude,
			  			longitude: that.shopobj.longitude,
			  			success: function () {
			  				console.log('success');
			  			}
			  		});
		  },
		reservationfun(id){
			// uni.navigateTo({
			// 	url:"/pages/subpackage/reservation/index?shopId="+id
			// })
			uni.navigateTo({
				url:"/pages/subpackage/store/detail?packageId="+this.selectpackageId+"&shopId="+this.selectshopId
			})
		},
		packagefun(packageId,shopId,index){
			this.selectshopId=shopId
			this.selectpackageId=packageId
			this.selectindex=index
			
		},
		gopackagefun(packageId,shopId,index){
			
			uni.navigateTo({
				url:"/pages/subpackage/store/detail?packageId="+this.selectpackageId+"&shopId="+this.selectshopId
			})
		},
	   async getPetShopDetailsfun(){
		 let res =	await getPetShopDetails(JSON.stringify(this.detailsdata))
		 console.log(res)
		 if(res.result==0){
			 this.shopobj=res.shop
			 this.collectFlag=res.collectFlag
			 this.packageList=res.packageList
			 this.teamList=res.teamList
			 this.serviceProject=res.shop.serviceProject.split(",")
			 res.serviceCaseList.forEach((item,index)=>{
				 item.afterBigImglist=item.afterBigImg.split("|")
				 item.beforeBigImglist=item.beforeBigImg.split("|")
			 })
			 this.serviceCaseList=res.serviceCaseList
			 
			 this.selectshopId=res.shop.id
			 this.selectpackageId=res.packageList[0].id
			 
		 }
		},
		showimgonefun(item){
			var that=this
			var arrlist=[]
			var newarrlist=[]
			arrlist=item.beforeBigImg.split("|")
			arrlist.forEach((item,index)=>{
				newarrlist.push(that.httpUrlFn(item))		
			})
			console.log(arrlist,newarrlist)
			// 预览图片
					uni.previewImage({
						urls: newarrlist,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
		},
		showimgtwofun(item){
			var that=this
			var arrlist=[]
			var newarrlist=[]
			arrlist=item.afterBigImg.split("|")
			arrlist.forEach((item,index)=>{
				newarrlist.push(that.httpUrlFn(item))		
			})
			console.log(arrlist,newarrlist)
			// 预览图片
					uni.previewImage({
						urls: newarrlist,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
			
		},
		//收藏
		async operateShopCollectfun(){
			const data={
				shopId:this.detailsdata.shopId,
				userId:this.detailsdata.userId,
				operate:this.collectFlag==1?0:1
			}
			let res= await operateShopCollect(JSON.stringify(data))
			if (res.result==0) {
				this.collectFlag=this.collectFlag==1?0:1
			}
			
		},
		httpUrlFn(item) {
		  return  BASE_URL_IMAHE + item;
		},
	  },
	};
	
	
</script>

<style lang="scss" scoped>
	.content{
		background: #F3F3F3;
		
	}
	.content-top{
		width: 750rpx;
		height: 560rpx;
		background: linear-gradient(360deg, rgba(255,255,255,0.1) 3%, rgba(243,182,168,0.1) 16%, #EB5F3F 100%);
		opacity: 1;
		padding-top: 136rpx;
		box-sizing: border-box;
		overflow: hidden;
		.content-topimg{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: auto;
			}
		}
	}
	.info{
		width: 745rpx;
		height: auto;
		background: #FFFFFF;
		position: relative;
		margin: 0 auto;
		// top: -230rpx;
		border-top-left-radius: 85rpx;
		border-top-right-radius: 85rpx;
		padding: 36rpx 35rpx;
		padding-bottom: 120rpx;
		margin-top: -230rpx;
		// z-index: 10000;
		.titleorlove{
			display: flex;
			justify-content: space-between;
			.titleorlove-title{
				font-size: 42rpx;
				color: #040000;
				line-height: 59rpx;
				margin-right: 20rpx;
			}
			.titleorlove-img{
				image{
					width: 53rpx;
					height: 47rpx;
				}
			}
		}
		.list-cw-item-listimg{
			width: 320rpx;
			display: flex;
			position: relative;
			margin-top: 19rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				background: #EB5F3F;
				opacity: 1;
				margin-right: 8rpx;
			}
			text{
				font-size: 30rpx;
				color: #EB5F3F;
				line-height: 42rpx;
				position: absolute;
				bottom: -5rpx;
				right: 0rpx;
			}
		}
		.info-fw{
			font-size: 30rpx;
			color: #3AA3BD;
			line-height: 42rpx;
			margin-top: 19rpx;
		}
		.info-new{
			display: flex;
			justify-content: space-between;
			margin-top: 16rpx;
			.info-left{
				display: flex;
				flex-direction: column;
				.info-left-yy{
					.info-left-yy-state{
						font-size: 30rpx;
						color: #EB5F3F;
						line-height: 42rpx;
						margin-right: 20rpx;
					}
					.text{
						font-size: 30rpx;
						color: #4E4D4D;
						line-height: 42rpx;
					}
					
				}
				.info-left-dz{
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					image{
						width: 19rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
					.info-left-dz-info{
						font-size: 26rpx;
						color: #4E4D4D;
						line-height: 36rpx;
					}
				}
				.info-left-jl{
					margin-top: 14rpx;
					font-size: 22rpx;
					color: #8F8F8F;
					line-height: 31rpx;
				}
			}
			.info-right{
				image{
					margin-top: 40rpx;
					width: 58rpx;
					height: 58rpx;
				}
				
			}
			
		}
		.store-fw{
			margin-top: 34rpx;
			.store-fw-list{
				display: flex;
				justify-content: space-between;
				margin-top: 46rpx;
				
				.store-fw-list-item{
					width: 143rpx;
					height: 172rpx;
					border: 1rpx dashed #8F8F8F;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.store-yh{
			margin-top: 48rpx;
			width: 100%;
			overflow: hidden;
			.store-yh-list{
				margin-top: 15rpx;
				display: flex;
				overflow-x: auto;
				.store-yh-list-item{
					width: 238rpx;
					margin-right: 47rpx;
					
					overflow: hidden;
					padding: 5rpx;
					border-radius: 15rpx;
					image{
						width: 100%;
						height: 238rpx;
						border-radius: 15rpx;
					}
					
				}
				.selectstore-yh-list-item{
					border: 2rpx solid #BC1B21;
				}
				.store-yh-list-item:last-child{
					margin-right: 0rpx;
				}
				.store-yh-title{
					width: 100%;
					padding-top: 18rpx;
					.store-yh-name{
						font-size: 30rpx;
						color: #040000;
						line-height: 42rpx;
					}
					.store-yh-js{
						font-size: 22rpx;
						color: #8F8F8F;
						line-height: 31rpx;
					}
					.store-yh-jg{
						margin-top: 12rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.store-yh-num{
							display: flex;
							align-items: flex-end;
							font-size: 44rpx;
							color: #BC1B21;
							// line-height: 62rpx;
							.store-yh-num-fh{
								font-size: 22rpx;
								color: #BC1B21;
								line-height: 31rpx;
								
							}
						}
						.store-yye{
							width: 85rpx;
							height: 42rpx;
							color: #FFFFFF;
							border-radius: 15rpx;
							background-color: #EB5F3F;
							font-size: 24rpx;
							line-height: 42rpx;
							text-align: center;
						}
					}
				}
			}
		}
		.store-tame{
			margin-top: 68rpx;
			.store-tame-list{
				margin-top: 26rpx;
				.store-tame-list-item{
					width: 680rpx;
					height: 135rpx;
					background: #FFFFFF;
					opacity: 1;
					border: 1rpx solid #040000;
					margin: 0rpx auto 30rpx;
					border-radius: 35rpx;
					padding: 11rpx 34rpx;
					display: flex;
					image{
						width: 105rpx;
						height: 105rpx;
					}
					.store-info{
						display: flex;
						flex-direction: column;
						// align-items: center;
						
						margin-left: 23rpx;
						.store-info-mameormax{
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							color: #040000;
							line-height: 42rpx;
							image{
								width: 31rpx;
								height: 31rpx;
								margin-left: 10rpx;
							}
						}
						.store-info-xx{
							margin-top: 20rpx;
							font-size: 22rpx;
							color: #8F8F8F;
							line-height: 31rpx;
						}
					}
				}
				.store-tame-list-item:last-child{
					
					margin: 0rpx auto 0rpx;
				}
			}
		}
		.store-al{
			margin-top: 42rpx;
			// width: 100%;
			// overflow: hidden;
			.store-al-list{
				width: 100%;
				margin-top: 36rpx;
				position: relative;
				overflow: hidden;
				
				.store-al-list-k{
					// width: auto;
				
					overflow-x: auto;
					display: flex;
					flex-shrink: 0;
				}
				.store-al-list-item{
					width: 326rpx;
					height: 156rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
					display: flex;
					position: relative;
					border-radius: 25rpx;
					
					.store-al-list-item-left{
						width: 92rpx;
						height: 43rpx;
						background: #8F8F8F;
						position: absolute;
						bottom:0;
						left: 0;
						text-align: center;
						font-size: 19rpx;
						color: #FFFFFF;
						line-height: 43rpx;
						border-bottom-left-radius: 25rpx;
						border-top-right-radius: 25rpx;
						
						
					}
					.store-al-list-item-right{
						width: 92rpx;
						height: 43rpx;
						background: #8F8F8F;
						position: absolute;
						right: 0;
						top: 0;
						text-align: center;
						font-size: 19rpx;
						color: #FFFFFF;
						line-height: 43rpx;
						border-bottom-left-radius: 25rpx;
						border-top-right-radius: 25rpx;
						
					}
					.image-left{
						width: 163rpx;
						height: 100%;
						border-bottom-left-radius: 25rpx;
						border-top-left-radius: 25rpx;
					}
					.image-right{
						width: 163rpx;
						height: 100%;
						border-bottom-right-radius: 25rpx;
						border-top-right-radius: 25rpx;
					}
					
				}
			}
		}
		.store-title{
			font-size: 42rpx;
			color: #040000;
			line-height: 59rpx;
		}
	}
	.bt-list{
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 39rpx;
		background-color: #FFFFFF;
		.bt-phoneorzx{
			display: flex;
			align-items: center;
			.bt-phoneorzx-item{
				text-align: center;
				margin-right: 49rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				view{
					margin-top: 4rpx;
					font-size: 22rpx;
					color: #040000;
					line-height: 31rpx;
				}
				
			}
			
		}
		.bt-yye{
			width: 422rpx;
			height: 76rpx;
			color: #FFFFFF;
			background-color: #EB5F3F;
			border-radius: 15rpx;
			font-size: 34rpx;
			text-align: center;
			line-height: 76rpx;
		}
	}
	
</style>